<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="./upload/webuploader.css" />
    <!--引入JS-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script type="text/javascript" src="./upload/webuploader.js"></script>
  </head>
  <body>
    <!--dom结构部分-->
    <div id="uploader-demo">
      <!--用来存放item-->
      <div id="fileList" class="uploader-list"></div>
      <div id="filePicker">选择图片</div>
    </div>
    <ul id="img-list"></ul>
  </body>
  <script>
    // 编辑
    var id = 5
    function edit(id) {
      id = id
    }
    // 初始化Web Uploader
    var uploader = WebUploader.create({
      // 选完文件后，是否自动上传。
      auto: true,
      // swf文件路径
      swf: './upload/Uploader.swf',
      // 文件接收服务端。
      server: 'http://test2022.com/fileupload',
      // 选择文件的按钮。可选。
      // 内部根据当前运行是创建，可能是input元素，也可能是flash.
      pick: '#filePicker',
      // 只允许选择图片文件。
      accept: {
        title: 'Images',
        extensions: 'gif,jpg,jpeg,bmp,png',
        mimeTypes: 'image/*',
      },
    })
    uploader.on('uploadBeforeSend', function (obj, data, headers) {
      if (id == null) {
        return
      }
      data.id = id
    })
    // 当有文件添加进来的时候
    uploader.on('fileQueued', function (file) {
      var $li = $(
          '<div id="' +
            file.id +
            '" class="file-item thumbnail">' +
            '<img>' +
            '<div class="info">' +
            file.name +
            '</div>' +
            '</div>'
        ),
        $img = $li.find('img')
      // $list为容器jQuery实例
      $('#img-list').append($li)

      // 创建缩略图
      // 如果为非图片文件，可以不用调用此方法。
      // thumbnailWidth x thumbnailHeight 为 100 x 100
      uploader.makeThumb(
        file,
        function (error, src) {
          if (error) {
            $img.replaceWith('<span>不能预览</span>')
            return
          }
          $img.attr('src', src)
        },
        100,
        100
      )
    })

    // 文件上传过程中创建进度条实时显示。
    uploader.on('uploadProgress', function (file, percentage) {
      var $li = $('#' + file.id),
        $percent = $li.find('.progress span')

      // 避免重复创建
      if (!$percent.length) {
        $percent = $('<p class="progress"><span></span></p>')
          .appendTo($li)
          .find('span')
      }

      $percent.css('width', percentage * 100 + '%')
    })

    // 文件上传成功，给item添加成功class, 用样式标记上传成功。
    uploader.on('uploadSuccess', function (file, res) {
      console.log(res)
      var strHtml = `<a href="${res._raw}">下载</a> <a href="javascript:viod(0);" onclick="edit(${res['data'].id})">编辑</a>`
      $('#' + file.id)
        .addClass('upload-state-done')
        .append(strHtml)
    })

    // 文件上传失败，显示上传出错。
    uploader.on('uploadError', function (file) {
      var $li = $('#' + file.id),
        $error = $li.find('div.error')

      // 避免重复创建
      if (!$error.length) {
        $error = $('<div class="error"></div>').appendTo($li)
      }

      $error.text('上传失败')
    })

    // 完成上传完了，成功或者失败，先删除进度条。
    uploader.on('uploadComplete', function (file) {
      $('#' + file.id)
        .find('.progress')
        .remove()
    })
  </script>
</html>
